<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Reflex.js (with IE 6/7 support)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-language" content="en">
	<link rel="bookmark" type="text/html" title="Reflex.js" href="http://www.netzgesta.de/reflex/">
	<meta name="Author" lang="en" content="reflex.netzgesta.de - Christian Effenberger">	<meta name="Publisher" lang="en" content="www.netzgesta.de">	<meta name="Copyright" lang="en" content="www.netzgesta.de - Christian Effenberger">	<meta name="Generator" lang="en" content="Christian Effenberger">
	<meta name="Description" lang="en" content="Reflex.js 1.2 allows you to add an cover flow effect (including reflection) to images on your webpages through unobtrusive javascript">
	<meta name="Keywords" lang="en" content="reflex.js,images,tilt,3d,border,opacity,reflection,cover flow effect,unobtrusive javascript,Mozilla,Firefox,Opera,Safari">
	<meta http-equiv="imagetoolbar" content="no">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<script type="text/javascript" src="reflex.js"></script>
	<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
a { color: blue; font-style:italic; text-decoration:none; }
tt {color: green;}
b {color: #993333;}
body { background: url(images/backgrnd.jpg) silver; color: black; font-family: Georgia,serif; line-height: 1.5; margin: 2em 2em;}
h2 { line-height: 1; }
.demo { float: left; padding: 10px; }
.logo { position: relative; width: 480px; white-space: nowrap;}
#guru { padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; }
#guru div { border: solid 3px red; padding: 4px; font-family: monospace; font-size: 1.25em; width: auto; height: auto; color: red; text-align: center; text-decoration: blink; }
#header { margin-bottom: 0; font-weight: normal; font-style: italic; color: gray; }
.bookmarks { white-space: nowrap; width: 98%; margin: 0; padding-top: 10px; border-top: 1px dotted gray;}
</style>
</head>
<body><noscript><div id="guru" title="By this you can recognize the Amiga fan!"><div><strong>Guru Meditation</strong> - With deactivated JavaScript: Images stay unmodified!</div></div></noscript>
<table summary="">
<tr><td valign="top" style="padding-top: 0.5em">
<div class="logo">
<img src="images/apple.jpg" width="100" class="reflex idistance4 iopacity50" style="margin-left: -10px" alt="" />
<img src="images/day.jpg" width="100" class="reflex itiltright idistance4 iopacity50" style="margin-left: -5px" alt="" />
<img src="images/keeps.jpg" width="100" class="reflex itiltnone idistance4 iopacity50" style="margin: 0 0px 0 -0px" alt="" />
<img src="images/doctor.jpg" width="100" class="reflex idistance4 iopacity50" alt="" style="" />
<img src="images/away.jpg" width="100" class="reflex itiltleft idistance4 iopacity50" style="margin: 0 -10px 0 -5px" alt="" />
</div>
</td>
<td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;">
<p><strong>Reflex.js 1.2</strong> allows you to add a Cover Flow<sup>&trade;</sup> effect (including reflection) to images on your webpages. <small><i>*Cover Flow is a trademark of Apple Inc.</i></small>. It uses unobtrusive javascript to keep your code clean.</p>
<p>It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.</p>
<p><small><a href="http://lab.netzgesta.de/" title="showcase">CVI-lab</a>: Get a fast impression of the effects and their illustration qualities.</small></p>
</td></tr>
</table>

<h2>Setting Up</h2>

<p>Download "reflex.js" and include it into your webpage.</p>

<code>
&lt;script type="text/javascript" src="<tt>reflex.js</tt>"&gt;&lt;/script&gt;
</code>

<h2>Using It</h2>

<p>To get the effect just add a class="<tt>reflex</tt>" to the image <em>(minimum dimension: 32x32)</em>.
<small><br>The needed vertical space of the canvas element will grow by the height of the reflection, plus the height of the distance.</small>
</p>

<h2>Classes</h2>

<ul>
<li>Initialisation class "<tt>reflex</tt>"</li>
<li><small><em>vary the reflection by adding idistance followed by the desired <b>height</b> in pixel:</em></small><br>
Reflection distance class "<tt>idistance</tt>" - min=0 max=100 default=0</li>
<li><small><em>vary the reflection by adding iheight followed by the desired <b>height</b> in percent:</em></small><br>
Reflection height class "<tt>iheight</tt>" - min=10 max=100 default=33</li>
<li><small><em>vary the reflection by adding iopacity followed by the desired <b>opacity</b> in percent:</em></small><br>
Reflection opacity class "<tt>iopacity</tt>" - min=0 max=100 default=33</li>
<li><small><em>vary the border by adding iborder followed by the desired <b>wide</b> in pixel:</em></small><br>
Border wide class "<tt>iborder</tt>" - min=0 max=100 default=0</li>
<li><small><em>vary the border by adding icolor followed by the desired <b>color</b> as hex:</em></small><br>
Border color class "<tt>icolor</tt>" - min=000000 max=ffffff default=f0f4ff</li>
<li><small><em>vary the 3D Z-Tilt direction by adding one of the following:</em></small><br>
Z-Tilt direction class "<tt>itiltright</tt>" or "<tt>itiltnone</tt>" or "<tt>itiltleft</tt>"<br>
by default "reflex.js" cycles through [right|none|left].</li>
</ul>

<h2>Scripting</h2>

<p>If you want flexibility, use "<b>cvi_reflex_lib.js</b>" instead of "<b>reflex.js</b>". 
You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).</p>
<dl>
	<dt><strong>Set</strong> defaults using Javascript</dt>
	<dd>
		<code>
		cvi_reflex.defaultTilt = 'none'; <tt>//STR  'n|l|r'-'none|left|right'</tt><br>
		cvi_reflex.defaultHeight = 33; <tt>//INT  10-100 (%)</tt><br>
		cvi_reflex.defaultDistance = 0; <tt>//INT  0-100 (px)</tt><br>
		cvi_reflex.defaultTransparency = 50; <tt>//INT  1-100 (%)</tt><br>
		cvi_reflex.defaultBorder = 0; <tt>//INT  0-20 (px)</tt><br>
		cvi_reflex.defaultColor = '#ffffff'; <tt>//STR '#000000'-'#ffffff'</tt><br>
		cvi_reflex.defaultBoxmode = false; <tt>//BOOLEAN</tt>
		</code>
  		<p></p>
	</dd>
	<dt><strong>Add</strong> images using Javascript</dt>
  	<dd>
  		<code>cvi_reflex.add(<tt>image</tt>, <tt>options</tt>);</code><br><small>
		<tt>image</tt> should be an image element: document.getElementById(<b>"myimg"</b>)<br>
		<tt>options</tt> can contain one or more values: {<tt>tilt</tt>: <b>value</b>, <tt>height</tt>: <b>value</b>, <tt>distance</tt>: <b>value</b>, <tt>transparency</tt>: <b>value</b>, <tt>border</tt>: <b>value</b>, <tt>color</tt>: <b>value</b>, <tt>boxmode</tt>: <b>value</b>}</small>
		<dl><dt>Example:</dt>
		<dd>
			<code>cvi_reflex.add(document.getElementById(<b>"myimg"</b>), { <tt>height</tt>: <b>25</b>, <tt>distance</tt>: <b>10</b> });</code>  		</dd></dl>
  		<p></p>
  	</dd>
	<dt><strong>Modify</strong> images using Javascript</dt>
  	<dd>
  		<code>cvi_reflex.modify(<tt>image</tt>, <tt>options</tt>);</code><br>
  		<small>If the image has already an effect but a <tt>option</tt> value has changed, the effect will be changed accordingly.</small><br>
		<dl><dt>Example:</dt>
		<dd>
			<code>cvi_reflex.modify(document.getElementById(<b>"myimg"</b>), { <tt>tilt</tt>: <b>"left"</b> });</code>
  		</dd></dl>
		<p></p>
  	</dd>
	<dt><strong>Remove</strong> effect from an image using Javascript</dt>
	<dd>
		<code>cvi_reflex.remove(<tt>image</tt>);</code>
  		<p></p>
	</dd>
</dl>

<h2>Demonstration</h2>

<p style="clear: left">Shows some of the things "reflex.js" does.<small><br><br>First 3 images with class "<tt>reflex</tt>" only, last 3 with "<tt>idistance?? iheight?? iopacity?? iborder? icolor??????</tt>" ...</small></p>
<div class="demo"><img src="images/test.jpg" width="200" class="reflex itiltright" alt="" /></div>
<div class="demo"><img src="images/test.jpg" width="200" class="reflex" alt="" /></div>
<div class="demo"><img src="images/test.jpg" width="200" class="reflex" alt="" /></div>
<p style="clear: left;"></p>
<div class="demo"><a href="images/left.jpg"><img src="images/left.jpg" width="200" class="reflex iopacity50" alt="" /></a><small><br>"<tt>reflex iopacity50</tt>"</small></div>
<div class="demo"><a href="images/none.jpg"><img src="images/none.jpg" width="200" class="reflex iopacity75" alt="" /></a><small><br>"<tt>reflex iopacity75</tt>"</small></div>
<div class="demo"><a href="images/right.jpg"><img src="images/right.jpg" width="200" class="reflex iopacity25" alt="" /></a><small><br>"<tt>reflex iopacity25</tt>"</small></div>
<p style="clear: left;"></p>
<div class="demo"><img src="images/example.jpg" width="200" class="reflex idistance16 iborder2 iheight24" onClick="alert('Image dimension '+this.width+'x'+this.height);" title="onClick event" alt="" /></div>
<div class="demo"><img src="images/example.jpg" width="200" class="reflex idistance0 iborder8 iheight40 icolorffffff" onClick="alert('ALT=\''+this.alt+'\'');" alt="landscape" /></div>
<div class="demo"><img src="images/example.jpg" width="200" class="reflex idistance8 iborder1 iheight32 icolor0070a4" onClick="alert('TITLE=\''+this.title+'\'');" title="beautiful landscape" alt="" /></div>
<p style="clear: left;"><small><em>Images used are copyrighted and are used for demonstration only.</em></small></p>

<h2>Why use Javascript Reflex Image?</h2>

<ul>
<li>Fast and easy to implement. Just add class="<tt><?=$theme ?></tt>" to the image and your good to go.</li>
<li>Don't need to spend time in an image editor creating an Cover Flow<sup>&trade;</sup> image effect.<br>
<small><i>*Cover Flow is a trademark of Apple Inc.</i></small>.</li>
<li>Works really well with forum avatars. Doesn't require additional server work.</li>
<li>It's dead easy to change the attributes of the images.</li>
<li>Free of charge use on non-commercial and private web sites.</li>
</ul>

<p>In older browsers, the script degrades and your visitors won't notice a thing.</p>

<h2>Restrictions</h2>

<p>Opera do not support printing of canvas.</p>

<h2>History</h2>

Version 1.2<ul><li>Added scriptable lib version <b>cvi_reflex_lib.js</b></li></ul>

Version 1.1<ul><li>Added IE support for <tt>itiltleft</tt> and <tt>itiltright</tt></li></ul>

Version 1.0<ul><li>Initial Release</li><li>Added support for Internet Explorer 6/7<br>(<tt>itiltleft</tt> and <tt>itiltright</tt> is still missing)</li></ul>

<h2>Credits</h2>

<p>The inspiration for the script came from apples <a href="http://www.apple.com/macosx/leopard/features/finder.html">Cover Flow</a><sup>&trade;</sup>.</p>

<h2>License</h2>

<p>Reflex.js is distributed under this <a href="LICENSE.txt">LICENSE</a>. License permits free of charge use on non-commercial and private web sites only. There are also <a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#099;&#118;&#105;&#064;&#110;&#101;&#116;&#122;&#103;&#101;&#115;&#116;&#097;&#046;&#100;&#101;">Commercial Software Licenses</a> available.</p>

<p><strong>Images used are copyrighted and are used for demonstration only.</strong></p>

<p><a href="http://cvi.netzgesta.de/">cvi.netzgesta.de</a>&nbsp;&nbsp;also visit&nbsp;&nbsp;<a href="http://lab.netzgesta.de/">CVI-lab</a>, <a href="http://s5.netzgesta.de/">S5 Reloaded</a> and <a href="http://ajaxfilmdb.sourceforge.net/">AJAX-FilmDB</a></p>

</body>
</html>